<template>
	<div class="navbar">
		<div class="wrapper content">
			<nuxt-link to="/" class="content-left">
				<img class="logo" src="@/assets/images/logo.png" alt="oppo商城logo" />
				<h1 class="title">OPPO商城</h1>
			</nuxt-link>

			<ul class="content-center">
				<template v-for="(item, index) in navbars" :key="navbars.id">
					<li :class="{ active: currentIndex === index }">
						<nuxt-link class="link" :to="getPagePath(item)" @click="currentIndex = index">
							{{ item.title }}
						</nuxt-link>
					</li>
				</template>
			</ul>
			<search class="content-right" />
		</div>
	</div>
</template>

<script setup>
	const props = defineProps({
		navbars: Array,
		default: () => [],
	})

	const currentIndex = ref(0)

	const getPagePath = computed(() => {
		return (item) => {
			let path = '/'

			if (item.type !== 'oppo') {
				path += item.type
			}

			return path
		}
	})
</script>

<style lang="scss" scoped>
	.navbar {
		height: $navBarHeight;
		z-index: 99;
		border-bottom-color: rgba(0, 0, 0, 0.06);
		border-bottom-style: solid;
		border-bottom-width: 1px;

		/* 吸顶 */
		@include elementSticky(36px);
		background-color: white;

		.content {
			height: 100%;
			/* @include border(); */
			@include normalFlex();
			justify-content: flex-start;
			align-items: center;

			.content-left {
				display: inline-block;
				width: $logoWidth;
				height: $logoHeight;
				.logo {
					height: 100%;
				}
				.title {
					text-indent: -1000px;
					height: 0;
					margin: 0;
				}
			}

			.content-center {
				@include normalFlex();
				width: 530px;
				margin-left: 60px;

				.link {
					font-size: 14px;
					color: #000;
					opacity: 0.55;
				}
				.link:hover {
					opacity: 1;
				}
				.active .link {
					opacity: 1;
				}
			}

			.content-right {
				margin-left: 50px;
			}
		}
	}
</style>
